<template>
  <a-form class="listSearchWrap table-page-search-wrapper">
  <a-row :gutter="[16, 0]" style="margin:0">
                                      <a-col
                                            :xs="12"
                                            :sm="12"
                                            :md="12"
                                            :lg="12"
                                            :xl="4"
                                            :xxl="3">
                                            VIN码：
                                      </a-col>
                                      <a-col
                                            :xs="12"
                                            :sm="12"
                                            :md="12"
                                            :lg="12"
                                            :xl="4"
                                            :xxl="5">
                                            {{ $t('campaignName') }}：
                                      </a-col>
                                      <a-col
                                            :xs="12"
                                            :sm="12"
                                            :md="12"
                                            :lg="12"
                                            :xl="4"
                                            :xxl="5">
                                            诊断/失败报文上传时间：
                                      </a-col>
                                      <a-col
                                            :xs="12"
                                            :sm="12"
                                            :md="12"
                                            :lg="12"
                                            :xl="4"
                                            :xxl="3">
                                      </a-col>
                    </a-row>
    <a-row :gutter="[16,0]">
      <a-col
            :xs="12"
            :sm="12"
            :md="12"
            :lg="12"
            :xl="4"
            :xxl="3">
            <a-input
              size="small"
              v-model="vin"
              readOnly
              />
      </a-col>
      <a-col
        :xs="24"
        :sm="12"
        :md="12"
        :lg="8"
        :xl="5"
        :xxl="5">
        <a-form-item :colon="false">
          <a-input
            v-model.trim="taskName"
            :placeholder="$t('pleaseInput') + $t('campaignName').toLowerCase()"
            allowClear
            @change="changQueryParams" />
        </a-form-item>
      </a-col>
      <a-col
        :xs="24"
        :sm="12"
        :md="12"
        :lg="8"
        :xl="8"
        :xxl="5">
        <a-form-item :colon="false">
          <a-range-picker
            :placeholder="['诊断/失败报文上传开始时间', '诊断/失败报文上传结束时间']"
            show-time
            @change="onTimeRangeChange"
            :value="defaultTimeRange"
            :disabled-date="disabledDate"
            :allow-clear="true"
            style="width:100%;"
          />
        </a-form-item>
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="24"
        :lg="8"
        :xl="8"
        :xxl="3"
        class="btnWarp">
        <a-form-item class="searchBtns">
        <a-button-group>
          <auth-button type="primary" :auth="statisticsPerms.monitor.fotalogView" @click="handleSearch">
            <i class="iconfont icon-chazhao"></i>
            {{ $t('inquiry') }}
          </auth-button>
          <a-button @click="clearCondition">
            <i class="iconfont icon-qingkong"></i>
            {{ $t('clear') }}
          </a-button>
        </a-button-group>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
import AuthButton from '@/components/AuthButton'
import moment from 'moment'
import { statisticsPerms } from '@/config/permission/index'

export default {
  components: {
    AuthButton
  },
  props: {
    queryParams: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      taskName: undefined,
      vin: undefined,
      statisticsPerms
    }
  },
  created () {
    this.taskName = this.queryParams.taskName
    this.vin = this.queryParams.vin
  },
  computed: {
    defaultTimeRange () {
      if (this.queryParams.startTime && this.queryParams.endTime) {
        return [moment(this.queryParams.startTime), moment(this.queryParams.endTime)]
      }
      return []
    }
  },
  methods: {
    changQueryParams () {
      this.$emit('changTaskName', this.taskName)
    },
    handleSearch () {
      this.$emit('handleSearch')
    },
    clearCondition () {
      const vm = this
      vm.taskName = undefined
      vm.queryParams.startTime = undefined
      vm.queryParams.endTime = undefined
      this.$emit('changTaskName', this.taskName)
      this.$emit('handleSearch')
    },
    // eslint-disable-next-line consistent-return
    onTimeRangeChange (date, dateString) {
      const vm = this
      if (date.length === 0) {
        vm.$set(vm.queryParams, 'startTime', '')
        vm.$set(vm.queryParams, 'endTime', '')
        return false
      }
      vm.$set(vm.queryParams, 'startTime', dateString[0])
      vm.$set(vm.queryParams, 'endTime', dateString[1])
    },
    disabledDate (current) {
      return current > moment()
    }
  }
}
</script>
